<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/templates/common/taglib.jsp"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>${title }</title>
    <link rel="stylesheet" href="${basePath}/static/bootstrap/css/bootstrap.css"/>
    <link href="${basePath}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/static/css/login.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/static/css/list.css" rel="stylesheet" type="text/css">
    <script  type="text/javascript" src="${basePath}/static/js/jquery.min.js"></script>
	<script  type="text/javascript" src="${basePath}/static/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${basePath}/static/page/jqPaginator/jqPaginator.js"></script>
    
</head>
<body>
<!--头部-->
	<%@include file="/WEB-INF/templates/common/header.jsp"%>
	<!------导航条-->
	<%@include file="/WEB-INF/templates/common/navigation.jsp"%>

<!--内容部分-->
<div class="list_main lay_out" class="clearfix">
    <div class="list_DH">
        <%@include file="/WEB-INF/templates/common/inhospitalDisease.jsp"%>
    </div>
    <div class="list_NR">
        <div class="loc">
            <h3 style="margin:0" >从事职业构成</h3>
        </div>
        <div class="list_con_table">
            <div class="search_table" style="position: relative; z-index: 999;">
                <ul class="clearfix" style="margin-bottom:0;">
                <li class="Label_1" >出院日期：&nbsp;</li>
                    <li class="Label_4" style="text-align:left;padding-left:3px;width:280px">
                    	<input class="Wdate input" style="width:120px;" type="text"  name='startTime' id='outHospitalStartDate' value='' onFocus="WdatePicker()" />
                    	<span>&nbsp;-&nbsp;</span>
                    	<input class="Wdate input" type="text" style="width:120px;"  name='endTime' id='outHospitalEndDate' value='' onFocus="WdatePicker()" />
                    </li>
                  <li class="Label_5">
                        <div class="right" style="text-align:right">
                            <a onclick="tj()">统计</a>   <a onclick="exportExcel()">导出</a>
                        </div>
                    </li>
                    
                </ul>
            </div> 
            <div id="chartmain" style="width:100%; height:520px; padding-bottom: 90px;"></div>
        
        </div>
        <!--
        	 <div class="pageList">
	            <ul class="pagination clearfix" id="page_plus"></ul>
	            <div class="pagination">
	                <div>总共：<b id="totalPage">0</b> 条信息    当前页是第 <b id="currentPage">0/0</b>　页</div>
	            </div>
      	  </div>
         -->
    </div>
</div>
<!------页脚部分--------->
<%@include file="/WEB-INF/templates/common/footer.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echatrs/echarts.min.js"></script>

<!--JS部分-->
<script type="text/javascript">
	function getOption(legendData, seriesData) {
		option = {
			    title : {
			        text: '从事职业',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c}人 ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: legendData
			        	/* ['11-国家公务员', '37-现役军人', '24-工人', '80-退(商)体人员',
			        	   '70-无业人员', '51-自由职业者', '13-专业技术人员', '54-个体经营者',
			        	   '31-学生', '27-农民', '90-其他', '21-企业管理人员', '17-职员'] */
			    },
			    series : [
			        {
			            name: '入院途径',
			            type: 'pie',
			            radius : '70%',
			            center: ['50%', '60%'],
			            data:seriesData,
			            /* [
			                {value:245, name:'11-国家公务员'},
			                {value:4, name:'37-现役军人'},
			                {value:794, name:'24-工人'},
			                {value:2400, name:'80-退(商)体人员'},
			                {value:481, name:'70-无业人员'},
			                {value:465, name:'51-自由职业者'},
			                {value:484, name:'13-专业技术人员'},
			                {value:188, name:'54-个体经营者'},
			                {value:672, name:'31-学生'},
			                {value:3664, name:'27-农民'},
			                {value:3131, name:'90-其他'},
			                {value:219, name:'21-企业管理人员'},
			                {value:744, name:'17-职员'}
			            ], */
			            label: {
              	             normal: {
              	                 textStyle: {
              	                     fontSize: 14
              	                 },
              	                 formatter: function(param) {
              	                      return param.name + ':\n' + param.value + '人';
              	                 }
              	             }
			            },
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};	
		return option;
	}

	function tj() {
		
		 var legendData = [];
		 var seriesData = [];
		 
		 $.ajax({
             type:"get",
             url:"${pageContext.request.contextPath}/retrieval/makeACareerStatistics",
             dataType:"json",
             data:{beginDate:$("#outHospitalStartDate").val(), endDate:$("#outHospitalEndDate").val()},
             success:function(result){
                 	console.log(result)
					var makeACareerStatisticsList = result.makeACareerStatisticsList;
                 	
                 	for (var i = 0; i < makeACareerStatisticsList.length; i++) {
                 		legendData.push(makeACareerStatisticsList[i].professionName);
                 		seriesData.push({value:makeACareerStatisticsList[i].num, name:makeACareerStatisticsList[i].professionName});
                 	}
                 	
                 	var option = getOption(legendData, seriesData);
                 	 //初始化echarts实例
             	    var myChart = echarts.init(document.getElementById('chartmain'));
                 	 
             	
             	    //使用制定的配置项和数据显示图表
             	    myChart.setOption(option);
             },
             error:function(XMLHttpRequest, textStatus, errorThrown) {
                   if(XMLHttpRequest.status == 403) {
                          alert("没有权限!");
                   }
             }  //error end 
            
      }); //ajax 结束
		
	}
	
	function exportExcel(){
		var outHospitalStartDate = $("#outHospitalStartDate").val();
		var outHospitalEndDate = $("#outHospitalEndDate").val();
		if(!outHospitalStartDate && !outHospitalEndDate){
			layer.alert("请输入查询条件!", {
				icon : 0
			});
			return;
		}
		
		
		
		
		window.location.href="${pageContext.request.contextPath}/retrieval/exportJobExcel?beginDate="+outHospitalStartDate+"&endDate="+outHospitalEndDate;
		 
	}
	
</script>


</body>
</html>